var carousel = document.querySelector("ul"),
	left_arrow = document.querySelector(".left_arrow"),
	right_arrow = document.querySelector(".right_arrow"),
	controls = document.querySelectorAll("ol li"),
	carousel_box = document.querySelector(".carousel_box"),
	carousel_detalis = document.querySelectorAll("ul li"),
	now_index = 0,
	last_index = 0,
	lis = document.querySelector("ul li"),
	is_run = false,
	new_li,
	timer,
	new_ol,
	controls;

/*.动态生成小圆点
 * */
new_ol = document.createElement("ol");
new_ol.innerHTML += ("<li class='active'></li>")
for(var i = 1; i < carousel_details.length; i++) {
	new_ol.innerHTML += "<li></li>";
}
carousel_box.appendChild(new_ol);
controls = document.querySelectorAll("ol li")
console.log(new_ol);
//右箭头点击事件
right_arrow.addEventListener("click", function() {
	if(!is_run) {
		is_run = true;
		if(++now_index >= 5) {
			right_run(now_index);
		} else {
			run(now_index);
		}
	}
})
//左箭头点击事件
left_arrow.addEventListener("click", function() {
	if(!is_run) {
		is_run = true;
		if(--now_index < 0) {
			left_run(now_index)
		} else(
			run(now_index)
		)
	}
});

//事件代理--圆点控制
//document.querySelector("ol").addEventListener("mouseover",function(e){	
//		for (var i=0;i<=controls.length;i++) {
//			if (e.target==controls[i]) {
//				console.log(i);
//				run(i);
//			}
//		}
//})

//圆点控制--index
//for(var i = 0; i < controls.length; i++) {
//	controls[i].index=i;
//	controls[i].addEventListener("mouseover", function() {
//		run(i);
//	});
//}
//圆点控制--闭包

for(var i = 0; i < controls.length; i++) {
	(function(j) {
		controls[j].addEventListener("mouseover", function() {
			if(last_index != j) {
				now_index = j;
				run(j);
			}
		});
	})(i);
}

//控制圆点--自定义属性
//for(var i = 0; i < controls.length; i++) {
//	controls[i].setAttribute("data-index",i)
//	controls[i].addEventListener("mouseover", function() {
//		console.log(this.getAttribute("data-index"));
//		run(this.getAttribute("data-index"));
//	});
//}

//轮播图运行主函数
function run(target_index) {
	console.log(target_index);
	carousel.style.transform = "translateX(-" + target_index * 100 + "%)";
	controls[last_index].classList.remove("active");
	last_index = target_index;
	controls[target_index].classList.add("active");
	carousel.addEventListener("transitionend", function() {
		is_run = false;
	})
};

//右边边界轮播函数
function right_run(target_index) {
	new_li = carousel_details[0].cloneNode(true);
	carousel.appendChild(new_li);
	carousel.style.transform = "translateX(-" + target_index * 100 + "%)";
	carousel.addEventListener("transitionend", right_run_end)
	controls[last_index].classList.remove("active");
	last_index = 0;
	now_index = 0;
	controls[now_index].classList.add("active");

	function right_run_end() {
		carousel.style.transition = "none";
		carousel.style.transform = "translateX(0%)";
		getComputedStyle(carousel).transition;
		carousel.style.transition = "";
		new_li.remove();
		carousel.removeEventListener("transitionend", right_run_end);
	}
	/* 
	 * 1.将第一张克隆
	 * 2.将克隆出来的元素添加到最后
	 * 3.执行轮播时的动画
	 * 4.动画结束后将视图的位置调到第一位
	 * 5.将克隆的元素裁剪
	 * 6.将原来的圆点取消类名
	 * 7.将第一圆点加上类名
	 * 
	 */
}
//左边界轮播函数
function left_run(target_index) {
	new_li = carousel_detalis[4].cloneNode(true);
	carousel.style.transition = "none";
	carousel.insertBefore(new_li, carousel.firstChild);
	carousel.style.transform = "translateX(-100%)";
	getComputedStyle(carousel).transition;
	carousel.style.transition = "";
	carousel.style.transform = "translateX(0%)";
	carousel.addEventListener("transitionend", left_run_end);
	controls[last_index].classList.remove("active");
	last_index = 4;
	now_index = 4;
	controls[now_index].classList.add("active");

	function left_run_end() {
		getComputedStyle(carousel).transition;
		carousel.style.transition = "none";
		carousel.removeChild(carousel.firstChild);
		carousel.style.transform = "translateX(-400%)";
		getComputedStyle(carousel).transition;
		carousel.style.transition = "";
		carousel.removeEventListener("transitionend", left_run_end);
	}
	is_run = false;
}

//function timer() {
//	set_time = setInterval(function() {
//		++now_index >= 5 ? now_index = 0 : "";
//		carousel.style.transform = "translateX(-" + now_index * 100 + "%)";
//		controls[last_index].classList.remove("active");
//		last_index = now_index;
//		controls[now_index].classList.add("active");
//	}, 2000);
//};
//timer();
//
//carousel.addEventListener("mouseover",function(){
//	clearInterval(set_time);
//});
//carousel.addEventListener("mouseleave",function(){
//	timer();
//})
//自动轮播函数
function auto_play() {
	timer = setInterval(function() {
		is_run = true;
		if(++now_index > carousel_details.length) {
			console.log("23123123")
			right_run(now_index);
		} else {
			run(now_index);
		}
	}, 2000)
}
auto_play()
carousel_box.addEventListener("mouseover", function() {
	clearInterval(timer);
});
carousel_box.addEventListener("mouseleave", function() {
	auto_play();
});